<!doctype html>
<html>
	<head>
		<title> Samples 4 angular module extValid </title>
		<style>
		.ng-invalid {
			border: 1px red solid;
		}
		</style>
	</head>

	<body ng-controller="MainCtrl">

	<div ng-form="mainForm">

	Older Age: <input type="text" ng-model="oldAge" ext-valid="r int gt100" /> {{oldAge}}
	<br />
	<input type="checkbox" ng-model="isOn" />
	Dynamic valid rule: <input type="text" ng-model="aa" ext-valid="{{isOn ? 'int' : 'date'}}" /> {{aa}}
	<br />
	<br />
	<br />

	Check ok if person1's age + person2's age >= 100
	<br />
	person1's age: <input type="text" ng-model="age1" ext-valid="r int fn:checkSum watch:age2" />
	<br />
	person2's age: <input type="text" ng-model="age2" ext-valid="r int" />

	<button ng-click="check()">Check</button>
	</div>

	<br />
	{{mainForm.$valid}}
	<br />
	{{mainForm.$error}}

	<script src="angular.min.js" type="text/javascript"></script>
	<script src="underscore.min.js" type="text/javascript"></script>
	<script src="ng-ext-valid.js" type="text/javascript"></script>
	<script language="javascript">
	var md = angular.module('md', ['extValid']);
	md.run(function(extValidChecker){
		extValidChecker.regPat('gt100', function(val){
			return val && parseFloat(val) > 100;
		}, '{0} must be bigger than 100!');
	});

	md.controller('MainCtrl', function($scope, $timeout, extValidChecker){
		$scope.checkSum = function(val){
			var age2 = $scope.age2 ? parseInt($scope.age2, 10) : 0;
			var age1 = parseInt(val, 10);

			return age1 + age2 >= 100 ? true : 'Age1 + Age2 should >= than 100!';
		};

		$scope.check = function(){
			var isValidOk = extValidChecker.checkFormWithVal($scope.mainForm) && $scope.mainForm.$valid;
			console.log('Form valid result : ' + isValidOk);

			var isValidNoRequire4AgeOlder = extValidChecker.validForm($scope.mainForm, ['oldAge'], ['r']) && $scope.mainForm.$valid;
			console.log('Form valid skip age older result : ' + isValidNoRequire4AgeOlder);
		};

		$timeout(function(){
			$scope.oldAge = 111;
		}, 1000 * 5);
	});

	angular.bootstrap(document, ['md']);
	</script>
	</body>
</html>